<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="/script/zui/css/zui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/style/global.css">
    <script src="/script/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>

    <script src="/script/date/moment.js"></script>
    <script src="/script/art/template-web.js"></script>
    <script src="/script/art/template-web-ex.js"></script>
    <script src="/script/lib.js"></script>
    <style type="text/css">
        html,
        body {
            background-color: #f4f4f6;
        }
        
        .home-body {
            background-color: #f4f4f6;
            position: relative;
            clear: both;
        }
        
        .page-body {
            padding: 20px 0 0 0;
            background-color: #f4f4f6;
            color: #666;
        }
        
        .card {
            background-color: #ffffff;
            padding: 20px;
            border: 0;
            box-shadow: 10px 10px 10px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
        }
        
        .card:hover {
            box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
        }
        
        .card .card-actions,
        .card .card-content {
            padding: 6px;
        }
        
        .card .card-heading {
            font-size: 16px;
            font-weight: bold;
        }
        
        .simple-icon>i {
            font-size: 40px;
        }
        
        .simple-text {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="app" class="page-body">
    </div>
</body>

</html>

<script type="text/html" id="tp_app">
    <div class="home-body">
        {{each simple d}}
        <div class="col-xs-3">
            <div class="card cards-borderless">
                <div class="card-content">
                    <div class="col-xs-6">
                        <div class="simple-icon {{d.color}}">
                            <i class="{{d.icon}}"></i>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="simple-text">{{d.name}}</div>
                        <div>{{d.value}}</div>
                    </div>
                </div>
            </div>
        </div>
        {{/each}}
    </div>
    <div class="home-body">
        <div class="col-xs-6">
            <div class="card">
                <div class="card-heading">
                </div>
                <div class="card-content">
                    <div id="order_user" style="height: 350px;"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card cards-borderless">
                <div class="card-heading">
                    库存数量
                </div>
                <div class="card-content" style="height: 337px;overflow-y: auto;">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>数量</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{each productStock ps}}
                            <tr>
                                <td>{{ps.name}}</td>
                                <td>{{ps.number}}</td>
                                <td>
                                    {{if ps.number
                                    <=10}} <span class="label label-danger label-outline">紧急</span>
                                        {{else if ps.number>10 && ps.number
                                        <=50}} <span class="label label-warning label-outline">一般</span>
                                            {{else}}
                                            <span class="label label-warning label-success label-outline">普通</span> {{/if}}
                                </td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="home-body">
        <div class="col-xs-6">
            <div class="card">
                <div class="card-content">
                    <div id="order_chart" style="height: 350px;"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card">
                <div class="card-content">
                    <div class="list-group">
                        <a href="#" class="list-group-item">
                            <h4 class="list-group-item-heading">项目</h4>
                            <p class="list-group-item-text text-muted">共12个新条目</p>
                        </a>
                        <a href="#" class="list-group-item active">
                            <h4 class="list-group-item-heading">Bug</h4>
                            <p class="list-group-item-text text-muted">没有未处理的bug</p>
                        </a>
                        <a href="#" class="list-group-item">
                            <h4 class="list-group-item-heading">任务</h4>
                            <p class="list-group-item-text text-muted"># 处理bug</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
    var userOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['App', '支付宝生活号', '支付宝小程序', '微信小程序', '微信公众号', 'WebApp']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                position: 'inner'
            },
            labelLine: {
                show: false
            },
            data: [{
                value: 335,
                name: 'App',
                selected: true
            }, {
                value: 679,
                name: '支付宝生活号'
            }, {
                value: 1548,
                name: '支付宝小程序'
            }]
        }, {
            name: '注册来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#fff',
                borderColor: '#fff',
                borderWidth: 1,
                borderRadius: 4,
                shadowColor: '#fff',
                rich: {
                    a: {
                        color: '#666',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                    },
                    b: {
                        fontSize: 16,
                        lineHeight: 33
                    },
                    per: {
                        color: '#333',
                        backgroundColor: '#3380fc',
                        padding: [2, 4],
                        borderRadius: 2
                    }
                }
            },
            data: [{
                value: 335,
                name: 'App'
            }, {
                value: 310,
                name: '支付宝生活号'
            }, {
                value: 234,
                name: '支付宝小程序'
            }, {
                value: 135,
                name: '微信小程序'
            }, {
                value: 1048,
                name: '微信公众号'
            }, {
                value: 251,
                name: 'WebApp'
            }]
        }]
    };
    var option = {
        title: {
            text: '广告收入'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        }, {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        }, {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        }, {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        }, {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
    };

    $(function() {

        var initData = {
            simple: [{
                icon: "icon icon-group",
                color: "text-success",
                name: "新增用户",
                value: "99999"
            }, {
                icon: "icon icon-shopping-cart",
                color: "text-danger",
                name: "商城交易",
                value: "100000.69"
            }, {
                icon: "icon icon-credit",
                color: "text-warning",
                name: "账户支出",
                value: "10000"
            }, {
                icon: "icon icon-credit",
                color: "text-warning",
                name: "账户余额",
                value: "9999.99"
            }],
            productStock: [{
                name: "I7水冷机器",
                number: 20
            }, {
                name: "I7水冷机器",
                number: 10
            }, {
                name: "I7水冷机器",
                number: 100
            }, {
                name: "I7水冷机器",
                number: 5
            }, {
                name: "I7水冷机器",
                number: 20
            }, {
                name: "I7水冷机器",
                number: 20
            }]
        };

        $("#app").showHtml(initData);

        var myChart = echarts.init(document.getElementById('order_chart'));
        myChart.setOption(option);

        var userChart = echarts.init(document.getElementById('order_user'));
        userChart.setOption(userOption);
    })
</script>